<script setup lang="ts">
import {reactive, ref} from "vue";
import {useRoute, useRouter} from "vue-router";

const currentLeftComponent = ref()

const route = useRoute()

const menuList = reactive([
  {title: "员工管理", url: ""},
  {title: "设备管理", url: ""},
])


function menuClickHandle(url){

}
</script>

<template>
  <div class="container">
    <header >
      <el-tabs class="customize">
        <el-tab-pane v-for="item in menuList" :label="item.title"></el-tab-pane>
      </el-tabs>
    </header>
    <main>
      <router-view>
        <keep-alive>
          <component :is="currentLeftComponent"></component>
        </keep-alive>
      </router-view>
    </main>
  </div>
</template>

<style scoped lang="scss">
.container{
  height: 100%;
  width: 100%;
}
::v-deep(.customize .el-tabs__nav-wrap::after){
  height: 1px;
  background-color: #e4e7ed59;
}
main{
  flex: 1;
}
header{
  text-align: center;
}
.active{
  background-color: #00AAFF;
  color: white;
}
</style>